<!--
 * @Author: H.
 * @Date: 2021-11-29 18:57:18
 * @LastEditTime: 2021-12-14 14:11:31
 * @Description:
-->
<template>
  <div class="login-account">
    <h1 class="login-title" style="margin-left: 60px">登录</h1>
    <el-form
      :model="LoginData"
      :rules="rules"
      ref="ruleForm"
      style="width: 400px"
      label-width="60px"
    >
      <el-form-item label="账号" prop="name">
        <el-input
          v-model="LoginData.name"
          placeHolder="账号"
          size="medium"
          class="login-right1"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="LoginData.password"
          placeHolder="密码"
          show-password
          class="login-right2"
        />
      </el-form-item>
      <el-form-item>
        <div class="login-form login-right3">
          <el-checkbox v-model="LoginData.isKeepPassword">记住我</el-checkbox>
          <el-button type="text">忘记密码</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%"
          class="login-right4"
          @click="sumbit"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import localCache from '@/utils/cache'
import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    const store = useStore()
    const userName = localCache.getCache('name')
    let loading = ref(false)
    let LoginData = reactive({
      isKeepPassword: false,
      password: '',
      name: ''
    })
    if (userName) {
      LoginData.isKeepPassword = true
      LoginData.name = userName
      LoginData.password = localCache.getCache('password')
    }

    const ruleForm = ref(null)
    const rules = {
      name: [{ required: true, message: '请输入账号', trigger: 'blur,change' }],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur,change' }
      ]
    }
    const sumbit = () => {
      ruleForm.value.validate((valid) => {
        if (valid) {
          store.dispatch('login/accountLoginAction', { ...LoginData })
          if (LoginData.isKeepPassword) {
            localCache.setCache('name', LoginData.name)
            localCache.setCache('password', LoginData.password)
          } else {
            localCache.deleteCache('name')
            localCache.deleteCache('password')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    return {
      loading,
      LoginData,
      ruleForm,
      rules,
      sumbit
    }
  }
})
</script>

<style lang="scss" scoped>
.login-account {
  padding: 1rem;
  margin-left: 4rem;
  .login-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .login-title {
    animation: inputRight 0.5s;
  }
  .login-right1 {
    animation: inputRight 0.7s;
  }
  .login-right2 {
    animation: inputRight 0.9s;
  }
  .login-right3 {
    animation: inputRight 1.1s;
  }
  .login-right4 {
    animation: inputRight 1.3s;
  }
  @keyframes inputRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
}
</style>
